<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            margin: 0px;
            padding: 0px;
        }

        .box {
            width: 500px;
            margin: 50px auto;
            height: auto;
        }

        .divfabu {
            position: relative;
            left: 0px;
            top: 25px;
        }

        .divfabu textarea {
            resize: none; /*防止用户拖动 右下角*/
            text-align: left;
        }

        .divinsert {
            position: relative;
            left: 80px;
            top: 30px;
            width: 300px;
        }

        .divinsert ul {
            list-style: none;
        }

        .divinsert ul li {
            border-bottom: 1px gray dashed;
            height: 30px;
            line-height: 30px;
            width: 300px;
        }

        .divinsert ul li a {
            float: right;
        }

    </style>
    <script>
        window.onload = function () {

            var box = document.getElementsByClassName("box")[0];
            let textarea = box.getElementsByTagName("textarea")[0];
            var bt = box.getElementsByTagName("button")[0];

            //创建divinsert
            let divinsert = document.createElement("div");
            let ul = document.createElement("ul");
            divinsert.appendChild(ul);
            divinsert.className = "divinsert";

            box.appendChild(divinsert);
            bt.onclick = function () {
                if (textarea.value == "") {
                    alert("请输入内容");
                    return;
                }
                var lies = ul.children;
                let li = document.createElement("li");

                li.innerHTML = textarea.value + "<a href=\"#\">删除</a>";
                ul.insertBefore(li, lies[0]);
                textarea.value = "";

                var ass = divinsert.getElementsByTagName("a");
                var liss = divinsert.getElementsByTagName("li");
                for (let i = 0; i < ass.length; i++) {
                    ass[i].index = i;
                    liss[i].index = i;

                    ass[i].onclick = function () {
                        // 很多种方式
                        // this.parentNode.remove();
                        ul.removeChild(this.parentNode);
                    };
                }
            }

        }
    </script>
</head>
<body>
<div class="box">
    <div class="divfabu">
        微博发布：<textarea rows="20" cols="40"></textarea>
        <button>点击发布</button>
    </div>

    <!--  <div class="divinsert">
          <ul>
              <li>
                  1<a href="#">删除</a>
              </li>
              <li>2</li>
              <li>2</li>
              <li>2</li>
          </ul>
      </div>-->
</div>

</body>
</html>